<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <title>分析生命周期</title>
</head>
<body>
   <div id="root">
        <h2>当前页面求和：{{sum}}</h2>
        <button @click='add'>点我+1</button>
   </div>
   <script>
       //修改Vue的全局配置
       Vue.config.productionTip = false;//关系生产换几个提示
       new Vue({
           el:'#root',
           data:{
            sum:0,
           },
           methods:{
                add(){
                    this.sum++;
                }
           },
           //vm将要销毁
           beforDestory(){
               
           },
           //vue实例创建之前
           beforeCreate() {
               console.log('--beforeCreate--');
           },
           created() {
                console.log('--created--');
           },
           //vue实例更新真实dom之前
           beforeMount() {
               //在这里对dom的修改的不奏效
           },
           mounted() {
               
           },
           beforeUpdate() {
               
           },
           updated() {
               
           },
           beforeDestroy() {
               
           },
           destroyed() {
               
           },
       });
   </script>
</body>
</html>